<template>
  <div class="home">
    <scroll
      ref="scroll"
      :data="popular"
      class="scroll-content"
    >
      <div>
        <div class="content">
          <div class="home-header">
            <div class="tools-logo">
              <img
                src="https://mcdn.huixiaoer.net/.nuxt/dist/img/logo_w.b2083f9.png"
                alt=""
              />
            </div>
            <router-link
              tag="div"
              to="/city"
              class="tools-location"
            >
              <span>北京</span>
              <span class="iconfont icondown-fill-xs"></span>
            </router-link>

            <router-link
              to="/search"
              tag="div"
              class="tools-search"
            >
              <span class="iconfont icon-search"></span>
            </router-link>
          </div>
          <div
            class="slider-container"
            v-if="banners.length"
          >
            <slider ref="slider">
              <div
                v-for="(item, index) in banners"
                :key="index"
              >
                <img
                  class="needsclick"
                  :src="item"
                />
              </div>
            </slider>
          </div>
          <!-- 提交的表单 -->
          <div class="home-form">
            <form action=""></form>
          </div>
          <!-- 为什么选择我们 -->
          <div class="home-point">
            <div class="title">为什么选择我们</div>
            <van-grid :column-num="2">
              <van-grid-item
                v-for="(value, index) in point"
                :key="index"
              >
                <van-icon
                  :class="value.iconname"
                  class="iconfont"
                />
                <span class="desctitle">{{ value.title }}</span>
                <span class="desc">{{ value.desc }}</span>
              </van-grid-item>
            </van-grid>
          </div>
          <!-- 热门会场 -->
          <div class="home-cards">
            <div class="title">
              热门会议酒店
            </div>
            <lateral-slide
              :hotelData="popular"
              :length="popular.length"
              v-if="popular.length"
            ></lateral-slide>
          </div>
          <!-- 精选会议场地 -->
          <div class="home-cards">
            <div class="title">精选会议酒店</div>
            <lateral-slide
              :hotelData="carefullyChosen"
              :length="carefullyChosen.length"
              v-if="carefullyChosen.length"
            ></lateral-slide>
          </div>
          <!-- 合作公司 -->
          <div class="home-companys">
            <div class="title">
              他们都在用
            </div>
            <div class="desc">
              累计服务20万+企业客户
            </div>
            <van-grid :column-num="3">
              <van-grid-item
                v-for="value in 6"
                :key="value"
              >
                <van-image
                  v-lazy="value"
                  src="https://mcdn.huixiaoer.net/.nuxt/dist/img/tx.810060c.png"
                />
              </van-grid-item>
            </van-grid>
          </div>
          <!-- //合作咨询 -->
          <div class="home-consult">
            <div class="title">
              成为会小二的合作酒店
            </div>
            <div class="desc">合作方式关注公众号</div>
            <div class="Btn">
              <span>合作咨询</span>
            </div>
          </div>
          <!-- 网站信息 -->
          <div class="home-footer">
            <div class="slogan">
              <p>© 2013-2019 www.huixiaoer.com. All Rights Reserved</p>
              <a href="">
                <i></i>
                京公网安备 11010502036187号
              </a>
            </div>
          </div>
        </div>
      </div>
      <div
        class="loading-container"
        v-show="!banners.length"
      >
        <loading></loading>
      </div>
    </scroll>
    <router-view></router-view>
  </div>
</template>
<script>
import scroll from 'base/scroll/scroll'
import slider from 'base/slider/slider'
import lateralSlide from 'base/lateral-slide/lateral-slide'
import { getBanners, getPoint, getHomehotels } from 'api/home'
import { ERR_OK } from 'src/api/config'
import loading from 'base/loading/loading'
export default {
  data () {
    return {
      banners: [],
      checkLoaded: false,
      point: {},
      popular: [],
      carefullyChosen: [],
      id: 'beijing'
    }
  },
  activated () {
    setTimeout(() => {
      this.$refs.slider && this.$refs.slider.refresh()
    }, 20)
  },
  components: {
    scroll,
    slider,
    lateralSlide,
    loading
  },
  created () {
    this._getBanners()
    this._getPoint()
    this._getHomehotels()
  },
  methods: {
    _getBanners () {
      getBanners().then(res => {
        if (res.code === ERR_OK) {
          this.banners = res.banners
        }
      })
    },
    _getPoint () {
      getPoint().then(res => {
        if (res.code === ERR_OK) {
          this.point = res.point
        }
      })
    },
    _getHomehotels () {
      getHomehotels().then(res => {
        if (res.code === ERR_OK) {
          this.popular = res.Popular
          this.carefullyChosen = res.carefullyChosen
        }
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~common/stylus/variable';
$tools-height = 2.86rem;
.home {
  position: fixed;
  width: 100%;
  top: 0px;
  bottom: 50px;
  color: $color-background;
  .scroll-content {
    height: 100%;
    overflow: hidden;
    .content {
      .home-header {
        display: flex;
        position: absolute;
        width: 90%;
        z-index: 22;
        height: $tools-height;
        padding-top: 5%;
        padding-left: 5%;
        padding-right: 5%;
        .tools-logo img {
          height: $tools-height;
          float: left;
        }
        .tools-location {
          text-align: center;
          line-height: $tools-height;
          font-size: $font-size-medium-x;
          margin-left: 0.4rem;
          padding: 0 0.4rem;
          background: rgba(0, 0, 0, 0.1);
          border-radius: 0.4rem;
        }
        .tools-search {
          flex: 1;
          text-align: right;
          line-height: $tools-height;
          span {
            font-size: $font-size-large-x;
          }
        }
      }
      .home-form {
        position: relative;
        width: 80%;
        height: 0;
        padding-top: 100%;
        overflow: hidden;
        margin: auto;
        margin-top: -20%;
        background-color: $color-background;
        z-index: 999;
        border-radius: 0.5rem;
        box-shadow: 0px 0px 8px rgba(192, 192, 192, 0.5);
      }
      .home-point {
        color: $color-text-gray;
        text-align: center;
        .iconfont {
          font-size: $font-size-large-x;
        }
        .title {
          color: $color-text;
          font-size: $font-size-large-x;
          padding: 25px;
          font-family: NSimSun;
          font-weight: bold;
        }
        .desctitle {
          font-size: $font-size-medium;
          padding: 10px;
        }
        .desc {
          font-size: $font-size-small-s;
        }
      }
      .home-cards {
        .title {
          color: $color-text;
          margin-left: 10px;
          font-size: $font-size-large;
          padding: 10px 10px;
        }
      }
      .home-companys {
        padding: 20px 10px;
        margin-left: 10px;
        .title {
          color: $color-text;
          font-size: $font-size-large-x;
          padding: 10px 0;
        }
        .desc {
          color: $color-text-t;
          font-size: $font-size-medium;
        }
      }
      .home-consult {
        width: 100%;
        height: 160px;
        background-size: cover;
        background: url('https://mcdn.huixiaoer.net/.nuxt/dist/img/consult-bg.0f23b23.jpg') 50% no-repeat; // mcdn.huixiaoer.net/.nuxt/dist/img/consult-bg.0f23b23.jpg) 50% no-repeat;
        text-align: center;
        .title {
          font-size: $font-size-large-x;
          padding-top: 30px;
        }
        .desc {
          font-size: $font-size-medium;
          padding-top: 10px;
        }
        .Btn {
          width: 100px;
          height: 40px;
          border: 1px solid #fff;
          margin: auto;
          margin-top: 10px;
          span {
            line-height: 40px;
          }
        }
      }
      .home-footer {
        height: 100px;
        .slogan {
          font-size: $font-size-small-s;
          color: $color-text-gray;
          text-align: center;
          margin-top: 20px;
          p {
            padding: 10px;
          }
          a {
            i {
              position: absolute;
              height: 10px;
              width: 10px;
              margin-left: -10px;
              background-image: url('https://mcdn.huixiaoer.net/.nuxt/dist/img/for-refer.d0289dc.png');
              background-size: 100% 100%;
            }
          }
        }
      }
    }
    .loading-container {
      position: absolute;
      width: 100%;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>
